import React from 'react';
import { createModalContainer } from '@/components/changeModal';
import {Button,Input,message,Form} from 'antd';
import { connect } from 'dva';
import styles from './modal.less';
import InputText from '@/components/Input/index';

const FormItem = Form.Item;
@Form.create()
class EditRemarkComponent extends React.Component {
  constructor(props) {
      super(props);
      this.state = {
        isFetching: false,
      }
  }

  componentWillMount() {
    window.Isoption = false;
  }
  componentDidMount() {
    window.Isoption = true;
  }

//取消
handleCancel =() => {
  this.props.cancel();
}

onTextChange = (v) => {
    this.setState({ name: v.target.value  });
}

handleSubmit =(e) => {
    const { dispatch } = this.props;
    this.setState({
        isFetching: true
    })
    e.preventDefault();
    this.props.form.validateFields(async (err, values) => {
        if(!err) {
            dispatch({
                type:'customerList/ChangeRemark',
                payload: {
                    MemberId: this.props.param.MemberId,
                    Remark:values.name
                },
                callback: {
                    success: res => {
                        if(res.Code ===0) {
                            message.success('修改成功');
                            this.setState({
                                isFetching: false
                            }, () => {
                                this.props.ok();
                            })
                        }
                    },
                    error: res => {
                        this.setState({
                            isFetching: false
                        });
                        message.error(res.Msg)
                    }
                }
            })
        } else {
            this.setState({
                isFetching: false
            })
        }
    })
}

    render() {
      const {getFieldDecorator} = this.props.form;
      const dataName = this.props.param.Remark;
      const formItemLayout = {
        labelCol: {
            span: 8 ,
          },
          wrapperCol: {
            span: 12 ,
          },
      }
        return (
          <Form onSubmit={this.handleSubmit} style={{marginTop: 24}}>
            <FormItem label="备注名" extra="仅后台可见" {...formItemLayout}>
                {getFieldDecorator('name', {
                    initialValue: dataName,
                    rules: [
                        {required: true, message: '不能为空，最多10个字'},
                    ]
                })(
                    <InputText name="name" onChange={this.onTextChange}  showtotal maxLength={10} autoFocus/>
                )}
            </FormItem>
            <FormItem className={styles.footBtn}>
                <Button onClick={this.handleCancel} style={{marginRight: 16}}>
                    取消
                </Button>
                <Button
                    type="primary"
                    htmlType="submit"
                    loading={this.state.isFetching}
                >
                    保存
                </Button>
            </FormItem>
      </Form>
        )
    }
}

const EditRemark = createModalContainer(
    connect(({customerList, global, loading}) => ({
        memberInfo: customerList.memberInfo
    }))(EditRemarkComponent),
    true,
    true
);

export default EditRemark;
